<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	import shopGoodsCard from "@/components/shop-goods-card/shop-goods-card.vue"
	import rentGoodsCard from "@/components/rent-goods-card/rent-goods-card.vue"
	import cellGroup from "../../uni_modules/uview-plus/libs/config/props/cellGroup";
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const userRole = userStoreInfo.userFlag
	// console.log(userStoreInfo.userFlag);
	let router = useRouter()
	let searchWord = ref('')
	let tabList = ref([{
		name: '商城',
	}, {
		name: '租赁',
	}])
	let fScrollList = ref([])
	let xinping = ref([])
	let zulingGoods = ref([])
	let tabCurrent = ref<number>(0)
	const tabsClick = (e : any) : void => {
		tabCurrent.value = e.index
		// console.log(tabCurrent.value);
	}
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	const goSearch = (e) => {
		router.push({
			name: e,
			params: {
				isType: tabCurrent.value
			}
		})
	}
	const goodsDetail = (id) => {
		router.push({
			name: 'goodsDetail',
			params: {
				id,
			}
		})
	}
	const getSwiper = () => {
		proxy.$req('GET', proxy.$api.getSwiper, {
			position: 1,
			count: 5,
		}).then((res) => {
			// console.log(res);
			shopSwiperList.value = res.result
		})
	}
	getSwiper()
	const getScreen = function (e) {
		proxy.$req('GET', proxy.$api.shopIndexScreen, {
			isType: e
		}).then((res) => {
			// console.log(res);
			if (e == 0) {
				shopJinList.value = res.result
			} else {
				zuScreen.value = res.result
			}
		})
	};
	getScreen(0)
	getScreen(1)
	const getHaowu = function () {
		proxy.$req('GET', proxy.$api.shopHaowu, {
			isType: 0,
			pageNo: 1,
			pageSize: 6
		}).then((res) => {
			// console.log(res);
			fScrollList.value = res.result.records
		})
	}();
	const getNewGoods = (type) => {
		proxy.$req('GET', proxy.$api.shopXinpin, {
			isType: type,
			pageNo: 1,
			pageSize: 12
		}).then((res) => {
			console.log(res);
			if (type == 0) {
				xinping.value = res.result.records
			} else {
				zulingGoods.value = res.result.records
			}
		})
	};
	getNewGoods(0)
	getNewGoods(1)
	let cartNum = ref()
	const getCarCount = function () {
		proxy.$req('GET', proxy.$api.shopCarCount, {}).then((res) => {
			console.log(res);
			cartNum.value = res.result
		})
	}();
	onShow(() => {
		proxy.$req('GET', proxy.$api.shopCarCount, {}).then((res) => {
			console.log(res);
			cartNum.value = res.result
		})
	})
	const gysSwiperClick = (e) => {
		// console.log(e);
		let url = ''
		switch (e) {
			case '商品管理':
				url = 'goodsManage'
				break;
			case '订单管理':
				url = 'orderManage'
				break;
			case '评价管理':
				url = "evalauteManage"
				break;
			case '优惠券管理':
				url = 'juanManage'
				break;
			case '对账管理':
				url = "billManage"
				break;
			case '店铺管理':
				url = "storeManage"
				break;
		}
		router.push({
			name: url,
			params: {}
		})
	}
	let shopSwiperList = ref<any>()
	let shopJinList = ref<any>([])
	let zuScreen = ref([])
	let gysList = ref([
		{
			img: '../../static/gysShop/gs1.png',
			text: '商品管理'
		},
		{
			img: '../../static/gysShop/gs2.png',
			text: '订单管理'
		},
		{
			img: '../../static/gysShop/gs3.png',
			text: '评价管理'
		},
		{
			img: '../../static/gysShop/gs4.png',
			text: '优惠券管理'
		},
		{
			img: '../../static/gysShop/gs5.png',
			text: '对账管理'
		},
		{
			img: '../../static/gysShop/gs6.png',
			text: '店铺管理'
		}
	])

	const rentClass = (e) => {
		console.log(e);
		router.push({
			name: 'classGoodsList',
			params: {
				id: e.id,
				name: e.name,
				type: 1,
			}
		})
	}
	let bgc = ref('rgba(255,255,255,0)')
	onPageScroll((e) => {
		// console.log(e);
		if (e.scrollTop < 20) {
			bgc.value = 'rgba(255,255,255,0)'
		} else if (e.scrollTop < 30) {
			bgc.value = 'rgba(255,255,255,0.1)'
		}
		else if (e.scrollTop < 40) {
			bgc.value = 'rgba(255,255,255,0.2)'
		}
		else if (e.scrollTop < 50) {
			bgc.value = 'rgba(255,255,255,0.3)'
		}
		else if (e.scrollTop < 60) {
			bgc.value = 'rgba(255,255,255,0.4)'
		}
		else if (e.scrollTop < 70) {
			bgc.value = 'rgba(255,255,255,0.6)'
		}
		else if (e.scrollTop < 80) {
			bgc.value = 'rgba(255,255,255,0.8)'
		}
		else if (e.scrollTop > 100) {
			bgc.value = 'rgba(255,255,255,1)'
		}
	})
</script>
<template>
	<!--供应商商城-->
	<view class="gysBox" v-if="userRole==2">
		<view class="topImg">
			{{ userStoreInfo.userInfo.supplier.storeName || ''}}
		</view>
		<view class="shopScrollList">
			<swiper :interval="3000" :duration="1000" :circular="false" class="middle" indicator-active-color="#FFCC00">
				<swiper-item>
					<view class="middle_list" v-for="(item,index) in gysList.slice(0,8)" :key="item.img"
						@click="gysSwiperClick(item.text)">
						<image :src="item.img"></image>
						<text>{{ item.text }}</text>
					</view>
				</swiper-item>
				<swiper-item class="" v-if="gysList.length>8">
					<view class="middle_list" v-for="item in gysList.slice(8,16)" :key="item.img"
						@click="gysSwiperClick(item.text)">
						<image :src="item.img"></image>
						<text>{{ item.text }}</text>
					</view>
				</swiper-item>
				<swiper-item class="" v-if="gysList.length>16">
					<view class="middle_list" v-for="item in gysList.slice(16,32)" :key="item.img">
						<image :src="item.img"></image>
						<text>{{ item.text }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<!--个人商家商城-->
	<view class="" v-else>
		<view class="shopHeader">
			<u-navbar :placeholder="true" :bgColor="bgc" height="60">
				<template #left>
					<view></view>
				</template>
				<template #center>
					<view class=" searchEle" @click="goSearch('searchPageShop')">
						<u-search v-model="searchWord" shape="square" :show-action="false" searchIcon="search"
							searchIconSize="24">
						</u-search>
					</view>
				</template>
			</u-navbar>
			<view class="topBtn">
				<view class="order" @click="routerLink('myOrder')">
					<u-icon name="order" size="38rpx"></u-icon>
					我的订单
				</view>
				<view class="goodsCar" @click="routerLink('shopCart')">
					<u-icon name="shopping-cart" size="46rpx"></u-icon>
					购物车({{cartNum}})
				</view>
			</view>
			<view class="tabs">
				<u-tabs :list="tabList" :activeStyle="{
					fontSize:'32rpx',
		        color: '#CB645E',
		        fontWeight: 'bold',
		    }" :inactiveStyle="{
		        color: '#000',
				fontSize:'32rpx',
		    }" lineColor="#CB645E" :current="tabCurrent" @click="tabsClick"></u-tabs>
			</view>
		</view>
		<view class="shopTab" v-show="tabCurrent==0">
			<view class="sSwiper">
				<u-swiper :list="shopSwiperList" keyName="imgUrl" height="193" :autoplay="false"></u-swiper>
			</view>
			<view class="shopScrollList">
				<swiper :interval="3000" :duration="1000" :circular="false" class="middle"
					indicator-active-color="#FFCC00">
					<swiper-item class="middleBox">
						<view class="middle_list" v-for="(item,index) in shopJinList.slice(0,8)" :key="item.img"
							@click="routerLink('shopGoodsClass')">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
					<swiper-item class="middleBox" v-if="shopJinList.length>8">
						<view class="middle_list" v-for="item in shopJinList.slice(8,16)" :key="item.img"
							@click="routerLink('shopGoodsClass')">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
					<swiper-item class="middleBox" v-if="shopJinList.length>16">
						<view class="middle_list" v-for="item in shopJinList.slice(16,32)" :key="item.img">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="fine">
				<view class="fTitle">
					<text class="st1">好物精选</text>
				</view>
				<view class="fScroll">
					<u-scroll-list :indicator="false">
						<view class="scroll-list" style="flex-direction: row;">
							<view class="scroll-list__goods-item " v-for="(item, index) in fScrollList" :key="index"
								:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
								@click="goodsDetail(item.id)">
								<image class="scroll-list__goods-item__image" :src="item.image"></image>
								<view class="scroll-list__goods-item_title u-line-2">
									{{ item.name }}
								</view>
								<view class="scroll-list__goods-item__text">
									<text class="scroll-list__goods-item__text_text1 intFont"><text
											style="font-size: 20rpx;">￥</text>{{ item.price }}</text>
									<view class="r-flex-start-end">
										<text class="scroll-list__goods-item__text_text2">￥{{ item.vipPrice }}</text>
										<!-- <text class="scroll-list__goods-item__text_text3">vip</text> -->
										<image src="http://image.qiniu.qdytcy.com/2023/7/12/vipTag.png"
											class="scroll-list__goods-item__text_text3" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="shopRecommend">
				<view class="rTitle">
					<text class="rt1">新品发布</text>
				</view>
				<view v-if="xinping.length>0">
					<shop-goods-card :list="xinping"></shop-goods-card>
				</view>
			</view>
		</view>
		<view class="leaseTab" v-show="tabCurrent==1">
			<view class="shopScrollList">
				<swiper :interval="3000" :duration="1000" :circular="false" class="middle"
					indicator-active-color="#FFCC00">
					<swiper-item class="middleBox">
						<view class="middle_list" v-for="(item,index) in zuScreen.slice(0,8)" :key="item.img"
							@click="rentClass(item)">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
					<swiper-item class="middleBox" v-if="zuScreen.length>8">
						<view class="middle_list" v-for="item in zuScreen.slice(8,16)" :key="item.img"
							@click="rentClass(item)">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
					<swiper-item class="middleBox" v-if="zuScreen.length>16">
						<view class="middle_list" v-for="item in zuScreen.slice(16,32)" :key="item.img"
							@click="rentClass(item)">
							<image :src="item.images"></image>
							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="zulingGoods.length>0">
				<rent-goods-card :listt="zulingGoods"></rent-goods-card>
			</view>
		</view>
	</view>
</template>



<style lang="scss">
	page {
		background-color: #FAFAFA !important;
	}


	.gysBox {

		// margin-top: 30rpx;
		view {
			box-sizing: border-box;
		}

		.topImg {
			padding-top: 100rpx;
			padding-left: 100rpx;
			width: 100%;
			height: 450rpx;
			background: linear-gradient(270deg, #FFF2DF 0%, #DD9792 100%);
			font-size: 50rpx;
			font-weight: 700;
			color: #fff;
		}

		.shopScrollList {
			width: 90%;
			margin: 30rpx auto 0;

			.middle {
				margin-top: 40rpx;
				width: 100%;
				height: 340rpx;
				overflow-x: scroll;

				// white-space: nowrap;
				.middle_list {
					width: 25%;
					height: 170rpx;
					display: inline-block;
					text-align: center;

					image {
						margin-left: 25%;
						display: block;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}

					text {
						line-height: 60rpx;
						font-size: 26rpx;
						display: block;
					}
				}
			}

		}
	}


	//下面是01端的
	.shopHeader {
		width: 100%;
		height: 566rpx;
		// background: linear-gradient(270deg, #FFF2DF 0%, #DD9792 100%);
		background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/shopTopBg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.searchEle {
			width: 686rpx;
			margin: 20rpx auto 0;
			height: 76rpx;
			display: flex;
			align-items: center;
		}

		.topBtn {
			width: 686rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			font-weight: 600;

			.order,
			.goodsCar {
				width: 336rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
			}

			.order {
				background-color: #fff;
				border-radius: 10rpx;
			}

			.goodsCar {
				background-color: #fff;
				border-radius: 10rpx;
			}
		}

		.tabs {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.shopTab {
		width: 686rpx;
		margin: -270rpx auto 0;

		.sSwiper {
			position: relative;
			margin-top: 70rpx;
		}

		.shopScrollList {
			width: 710rpx;
			margin: 30rpx auto 0;
			margin-left: -10rpx;

			.middle {
				margin-top: 40rpx;
				width: 100%;
				height: 340rpx;
				overflow-x: scroll;

				// white-space: nowrap;
				.middleBox {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.middle_list {
						width: 20%;
						height: 170rpx;
						display: inline-block;
						text-align: center;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;

						image {
							// margin-left: 25%;
							display: block;
							width: 96rpx;
							height: 96rpx;
							border-radius: 50rpx;
						}

						text {
							line-height: 60rpx;
							font-size: 24rpx;
							display: block;
						}
					}
				}
			}

		}

		.fine {
			width: calc(686rpx - 32rpx);
			padding: 32rpx 0 32rpx 32rpx;
			height: calc(496rpx - 64rpx);
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			margin-top: 10rpx;

			.fTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;

				.st1 {
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
				}
			}

			.fScroll {
				margin-top: 20rpx;

				.scroll-list {
					@include flex(column);
					width: 192rpx;

					&__goods-item {
						margin-right: 10rpx;

						&__image {
							width: 192rpx;
							height: 192rpx;
							border-radius: 10rpx;
						}

						&_title {
							height: 68rpx;
							font-size: 24rpx;
						}

						&__text {

							&_text1 {
								color: #f56c6c;
								font-size: 36rpx;
								margin-top: 5rpx;
								height: 68rpx;
							}

							&_text2 {
								display: inline-block;
								margin-top: 15rpx;
								height: 28rpx;
								color: #333;
								font-size: 24rpx;
								margin-right: 10rpx;
							}

							&_text3 {
								width: 60rpx;
								height: 28rpx;
							}
						}
					}
				}
			}
		}

		.shopRecommend {
			width: calc(686rpx - 64rpx);
			padding: 32rpx;
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			margin-top: 32rpx;

			.rTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.rt1 {
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
				}
			}
		}
	}

	.leaseTab {
		padding: 0 32rpx;
		margin: -270rpx auto 0;

		.shopScrollList {
			width: 710rpx;
			margin: 30rpx auto 0;
			margin-left: -10rpx;

			.middle {
				margin-top: 40rpx;
				width: 100%;
				height: 340rpx;
				overflow-x: scroll;

				// white-space: nowrap;
				.middleBox {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.middle_list {
						width: 20%;
						height: 170rpx;
						display: inline-block;
						text-align: center;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;

						image {
							// margin-left: 25%;
							display: block;
							width: 96rpx;
							height: 96rpx;
							border-radius: 50rpx;
						}

						text {
							line-height: 60rpx;
							font-size: 24rpx;
							display: block;
						}
					}
				}
			}

		}
	}
</style>